<template>
  <div class="setting">
    <h1>博客基础设置</h1>
    <el-divider content-position="left">博客信息</el-divider>
    <el-form :model="blogger" label-width="120px">
      <el-form-item>
        <el-avatar :size="'large'" :src="bloggerInfo.avatar"/>
        <el-button style="margin-left: 50px" plain @click="avatarVisible = true"> 上传头像</el-button>
      </el-form-item>
      <el-form-item label="博主名">
        <el-input v-model="bloggerInfo.bloggerName"/>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="bloggerInfo.description"/>
      </el-form-item>
    </el-form>
  </div>

  <el-dialog
      v-model="avatarVisible"
      title="上传头像"
      width="700"
  >
    <el-upload
        action=""
        ref="uploadRef"
        list-type="picture-card"
        accept=".png,.jpg,.jepg"
        :on-change="handleChange"
        :auto-upload="false"
        :limit=1
    >
      <el-icon>
        <Plus/>
      </el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image"/>
    </el-dialog>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="avatarVisible = false">取消</el-button>
        <el-button type="primary" @click="submitUpload">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {bloggerInfo} from "@/store/customer/inedx";
import {ElMessage, type UploadInstance} from "element-plus";
import {uploadAvatar} from "@/api/admin";

const uploadRef = ref<UploadInstance>()
const blogger = ref({});
const avatarVisible = ref(false);
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const uploadFileList = ref(null);

onMounted(() => {
  blogger.value = JSON.parse(JSON.stringify(bloggerInfo))
})

const handleChange = (file:any, fileList:any) => {
  console.log(fileList)
  uploadFileList.value = fileList;
};

const submitUpload = () => {
    const files = uploadFileList.value; // 获取文件列表
    console.log(files)
    if (files && files.length > 0) {
      const formData = new FormData();
      formData.append('file', files[0].raw); // 假设只上传第一个文件
      uploadAvatar(formData).then((res) => {
        if(res.code ===200){
          ElMessage({
            message: '上传成功',
            type: 'success',
          })
          avatarVisible.value = false;
        }else{
          ElMessage({
            message: res.msg,
            type: 'error',
          })
        }
      });
    }
}

</script>

<style scoped>
.setting {
  padding: 20px;
}

.el-divider >>> .el-divider__text {
  font-size: 20px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>